<template>
  <el-dialog
    :title="data.title"
    :visible.sync="data.visible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    class="dialog-width"
  >
    <div class="box">
        <div class="row">
          <span class="label" >名称</span>
          <input ref="inputFolder" class="input" v-model="data.form.destName" placeholder="请输入"/>
        </div>
    </div>
    <span slot="footer">
      <el-button
        type="primary"
        :loading="data.btnLoading"
        @click="submitDialog"
      >
        确定修改
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as apis from '@/api/fairyshell'
export default {
  data() {
    return {
      data: {
        title: '重命名',
        dialogType: false,
        btnLoading: false,
        visible: false,
        form: {
          cId:'',
          srcName:'', //当前名称
          destName:'' //⽬标名称
        },
      },
    }
  },
  methods: {
    // 初始化
    init(data) {
      
      this.data.dialogType = data.flag // rename
      this.data.title = '重命名'
      this.data.form.cId = data.cId
      this.data.form.srcName = data.filename
      this.data.form.destName = data.filename
      this.data.visible = true
    },
    // down
    submitDialog () {
      // const reg = /^[a-zA-Z][a-zA-Z0-9]*$/ // 字符串及数字除去特殊字符
      // if(!reg.test(this.$refs.inputFolder.value)){
      //   this.$message({
      //     type: 'error',
      //     message: '请输入正确的名称！'
      //   })
      //   return
      // }
      this.data.btnLoading = true
      //this.data.form.destName = this.$refs.inputFolder.value
      apis
        .sftpRename(this.data.form)
        .then((res) => {
          if(res.data && res.data.path){
            this.$emit('updateProcessData',{currentPath: res.data.path,tableData: res.data.fileInfos,flag:this.data.dialogType})
          }else{
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
        .catch(res => {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        })
        .finally(() => {
          this.$nextTick(() => {
            this.data.btnLoading = false
            this.closeDialog()
          })
        })
    },
    clearDataForm() {
      // 清空数据
      Object.keys(this.data.form).forEach(key => (this.data.form[key] = ''))
    },
    // 取消
    closeDialog() {
      this.data.visible = false
      this.$refs.inputFolder.value = ''
      this.clearDataForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width:100%;
  .row{
    display: flex;
    height: 35px;
    line-height: 35px;
    padding-right: 20px;
    span{
      &.label{
        width:100px;
      }
      &.info{
        flex:1;
        border: 1px solid #ddd;
        cursor: pointer;
        padding:0 5px;
        color:#909399;
      }
    }
    .input{
      width:100%;
    }
  }
  .tips{
    margin:20px 0;
    font-size:12px;
    color: #666;;
  }
}
</style>
